<template>
  <div>
    <el-table
        :data="categoryList"
        style="width: 100%; margin-bottom: 20px"
        row-key="id"
        border
        :tree-props="{'children':'childrens'}"
        :default-expand-all="false"
    >
      <el-table-column prop="id" label="ID" />
      <el-table-column prop="categoryName" label="名称" />
      <el-table-column prop="parentId" label="父ID" />
      <el-table-column label="状态" width="100">
        <template #default="scope">
          <span v-if="scope.row.status == 1" style="color:green">已发布</span>
          <span v-if="scope.row.status == 0" style="color:red">未发布</span>
        </template>
      </el-table-column>
      <el-table-column label="排序">
        <template #default="scope">
          <el-input v-model="scope.row.sorted" />
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="创建时间" />
      <el-table-column prop="updateTime" label="更新时间" />
      <el-table-column label="操作">
        <template #default="scope">
          <el-button size="small" type="primary" @click="handleEdit(scope.$index, scope.row)"><el-icon><Edit /></el-icon>编辑</el-button>
          <el-button size="small" type="danger" icon="Delete" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import { loadCategory } from '@/api/videocategory'

// 定义接受分类数据的容器--响应式
var categoryList = ref([])

// 定义查询分类数据的方法
const handleLoadData = async() => {
  const res = await loadCategory()
  categoryList.value = res.data
}

// 生命周期执行函数
onMounted(() => {
  handleLoadData()
})
</script>
